<template>
  <q-page padding class="fixed-full flex">

    <IEcharts class="echarts" :option="cateOption" :resizable="true"/>

  </q-page>
</template>

<script>
import IEcharts from 'vue-echarts-v3/src/full.js'
import { ref } from 'vue'

export default {
  name: 'Cates',

  components: {
    IEcharts
  },

  async mounted () {
    await this.$store.dispatch('comp/getAllCateList')
      .then(list => {
        const pkToId = {}
        list.forEach(c => {
          const id = Object.keys(pkToId).length
          pkToId[c.pk] = {
            id: id,
            value: 1
          }
        })
        list.forEach(c => {
          if (c.nested_cate) {
            pkToId[c.nested_cate].value += pkToId[c.pk].value * 0.5
          }
        })
        this.graph = list.map(c => {
          let target = null
          if (pkToId[c.nested_cate]) {
            target = pkToId[c.nested_cate].id
          }
          const size = c.nested_cate === null ? 50 : pkToId[c.pk].value
          const res = {
            id: pkToId[c.pk].id,
            name: c.name,
            source: pkToId[c.pk].id,
            target: target,
            symbolSize: size
          }
          return res
        })
        console.log(this.graph)
      })
  },

  data () {
    // 我们需要获取节点列表，然后修改字段名称
    const graph = ref([])
    return {
      graph,
      cateOption: {
        title: {
          top: 'bottom',
          left: 'right'
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'force',
            circular: {
              rotateLabel: true
            },
            data: graph,
            links: graph,
            roam: true,
            zoom: 3,
            label: {
              show: true,
              position: 'top',
              formatter: '{b}',
              overflow: 'truncate'
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 5
              }
            }
          }
        ]
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
